<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeAtlas - 技术实现的知识图谱</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 英雄区域 -->
    <section class="hero">
        <div class="container hero-content">
            <h1 class="glitch-title">CodeAtlas</h1>
            <p class="hero-subtitle">探索技术实现的无限可能</p>
            <div>
                <a href="#features" class="cta-button">
                    <i class="fas fa-compass"></i> 开始探索
                </a>
                <a href="https://github.com/yourusername/code-atlas" class="cta-button" style="background: transparent; color: var(--accent); margin-left: 1rem;">
                    <i class="fab fa-github"></i> GitHub
                </a>
            </div>
        </div>
    </section>

    <!-- 特点介绍 -->
    <section class="features" id="features">
        <div class="container">
            <div class="features-grid">
                <div class="feature-card floating">
                    <i class="fas fa-project-diagram feature-icon"></i>
                    <h3>结构化知识</h3>
                    <p>通过清晰的分类体系，快速定位你需要的技术实现方案。每个实现都经过精心组织，确保你能够轻松理解和应用。</p>
                </div>
                <div class="feature-card floating" style="animation-delay: 0.2s">
                    <i class="fas fa-code feature-icon"></i>
                    <h3>实战导向</h3>
                    <p>不只是代码片段，而是完整的解决方案。每个技术实现都包含详细的说明和最佳实践，直接应用于实际项目。</p>
                </div>
                <div class="feature-card floating" style="animation-delay: 0.4s">
                    <i class="fas fa-brain feature-icon"></i>
                    <h3>深度学习</h3>
                    <p>深入理解每个技术实现背后的原理和设计思路。通过实践学习，掌握核心技术要点。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 技术领域 -->
    <section class="categories">
        <div class="container">
            <div class="category-grid">
                <div class="category-card">
                    <img src="../icons/unity-icon.svg" alt="Unity" class="category-icon">
                    <h3>Unity开发</h3>
                    <p>游戏引擎开发技术，从渲染到物理，从动画到优化，全面的技术实现指南。</p>
                </div>
                <div class="category-card">
                    <img src="../icons/render-icon.svg" alt="渲染" class="category-icon">
                    <h3>图形渲染</h3>
                    <p>探索现代图形渲染技术，从基础着色器到高级特效，实现惊艳的视觉效果。</p>
                </div>
                <div class="category-card">
                    <img src="../icons/web-icon.svg" alt="Web" class="category-icon">
                    <h3>Web技术</h3>
                    <p>现代Web开发的最佳实践，包括前端框架、性能优化和响应式设计等核心技术。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 数据统计 -->
    <section class="stats">
        <div class="container">
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-number" data-target="100">100+</div>
                    <div>技术实现</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" data-target="6">6</div>
                    <div>技术领域</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" data-target="1000">1000+</div>
                    <div>开发者</div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <p>CodeAtlas - 你的技术实现导航图</p>
            <p style="color: var(--text-secondary);">Made with <span style="color: var(--accent);">❤️</span> by the developer community</p>
        </div>
    </footer>

    <script>
        // 数字增长动画
        const stats = document.querySelectorAll('.stat-number');
        
        const animateNumber = (element, target) => {
            let current = 0;
            const increment = target / 50;
            const timer = setInterval(() => {
                current += increment;
                element.textContent = Math.floor(current) + (target === 6 ? '' : '+');
                if (current >= target) {
                    element.textContent = target + (target === 6 ? '' : '+');
                    clearInterval(timer);
                }
            }, 40);
        };

        // Intersection Observer
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const target = parseInt(entry.target.dataset.target);
                    animateNumber(entry.target, target);
                    observer.unobserve(entry.target);
                }
            });
        });

        stats.forEach(stat => observer.observe(stat));
    </script>
</body>
</html>
